<template>
  <el-dialog :title="info.name" top="5vh" append-to-body :visible.sync="isFormShow"
    :width="Mobile == 'phone' ? '100%' : '65%'" :close-on-click-modal="Mobile!=='phone'" :close-on-press-escape="false"
    :show-close="false" :style="{height: Mobile == 'phone' ? '660px' : '',overflow:'auto',paddingTop: '12vh'}">
    <!-- 搜索条件部分 -->
    <el-form class="aform" :inline="true" v-if="info.Search" :label-width="Mobile == 'phone' ? '70px' : ''">
      <!-- 暂时去掉 -->
      <!-- <el-form-item label="订单类型" v-if="info.GetApi == 'GetQwOrder'">
        <el-select
          size="small"
          v-model="SearchForm.OrderType"
          placeholder="请选择订单类型"
        >
          <el-option
            :label="value.label"
            :value="value.value"
            v-for="value in OrderTypeOptions"
            :key="value.label"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="仓库类型" v-if="info.GetApi == 'GetStockUpInList'">
        <el-select size="small" v-model="SearchForm.warehouse_id" placeholder="请选择仓库类型">
          <el-option value-key="id" :label="value.name" :value="value.id" v-for="value in WareHouseOptions"
            :key="value.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供货商" v-if="info.GetApi == 'GetStockUpInList'">
        <el-select size="small" v-model="SearchForm.supplier_id" placeholder="请选择供货商">
          <el-option value-key="id" :label="value.name" :value="value.id" v-for="value in SupplierOptions"
            :key="value.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型" v-if="info.GetApi == 'getQwOrderSelect'">
        <el-select size="small" v-model="SearchForm.isOffline" placeholder="请选择订单类型">
          <el-option :label="value.label" :value="value.value" v-for="value in OfflineOptions"
            :key="value.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单id"
        v-if="info.GetApi == 'GetReturnAndAfsList' || info.GetApi == 'getQwOrderSelect' || info.GetApi == 'GetQwOrder' || info.GetApi == 'GetShipList'">
        <el-input size="small" v-model="SearchForm.searchOrderId" placeholder="请输入要搜索的订单id"></el-input>
      </el-form-item>
      <el-form-item label="SKU" v-if="info.GetApi == 'GetStockSkuList' || info.GetApi == 'GetStockUpInList'">
        <el-input size="small" v-model="SearchForm.skuId" placeholder="请输入要搜索的SKU"></el-input>
      </el-form-item>
      <el-form-item label="SKU名称"
        v-if="info.GetApi == 'GetStockSkuList' || info.GetApi == 'GetStockUpInList' || info.GetApi == 'GetShipStockListBySku'">
        <el-input size="small" v-model="SearchForm.skuName" placeholder="请输入要搜索的SKU名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="GetDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table ref="table" :data="tableData" border :max-height="350" tooltip-effect="dark" size="mini"
      @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column :label="item.title" show-overflow-tooltip v-for="item in info.tableHeader" :key="item.title"
        :width="item.width ? item.width : ''">
        <template v-slot="scope">
          <ColumnTable :CurretItem="scope.row" :ItemValue="item.value" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div class="pagination" v-if="pageTotal > 0">
      <el-pagination @current-change="handleCurrentChange" :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize" layout="total, prev, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button size="small" @click="isFormShow = false">取 消</el-button>
        <el-button size="small" type="primary" @click="Submit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex"; // 引入vuex属性
import { GetShipStockListBySku, GetQwOrder } from "@/api/index"; // 获取库存接口 关联运营订单接口
import { GetReturnAndAfsList, GetStockSkuList, getQwOrderSelect } from "@/api/index"; // 退款退货订单 sku接口
import { GetStockUpInList, GetShipList } from "@/api/index"; // 库存商品接口 发货表
import { GetExchangeList } from "@/api/index"; // 换货订单列表
import { SaveOnlyShip, SaveOnlyExchangeShip } from "@/api/index"; // 确认发货接口
import { GetSupplierList, GetWarehouseList } from "@/api/index"; // 厂商数据 仓库类型数据

export default {
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
    Mobile: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isFormShow: false, // 控制弹窗开关
      tableData: [], // 表格数据
      loading: true, // 表格加载
      multipleSelection: [], // 选中的数据
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      }, // 分页参数
      pageTotal: 0, // 总条数
      SearchForm: {
        OrderNo: "",
        OrderType: 0,
        skuId: "",
        skuName: "",
        searchOrderId: "",
        warehouse_id: 0,
        supplier_id: 0,
        isOffline: 1,
      },
      OrderTypeOptions: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "正式订单",
        },
        {
          value: 2,
          label: "运营补单",
        },
      ], // 订单类型
      OfflineOptions: [
        {
          value: 1,
          label: "线上订单",
        },
        {
          value: 2,
          label: "线下订单",
        },
      ],
      SupplierOptions: [
        {
          id: 0,
          name: "全部",
        },
      ], // 供货商
      WareHouseOptions: [
        {
          id: 0,
          name: "全部",
        },
      ], // 仓库类型
    };
  },
  computed: {
    ...mapState(["CurrentItem"]),
  },
  created() { },
  mounted() { },
  watch: {},
  methods: {
    // 获取厂商列表
    GetOptionsList() {
      GetSupplierList().then((res) => {
        this.SupplierOptions = this.SupplierOptions.concat(res);
      });
    },
    // 获取仓库列表
    GetWarehouseOptionsList() {
      GetWarehouseList().then((res) => {
        // console.log(res, "仓库类型");
        this.WareHouseOptions = this.WareHouseOptions.concat(res);
      });
    },
    // 获取列表接口
    GetDataList() {
      // console.log(this.CurrentItem);
      this.loading = true;
      const API = {
        GetShipStockListBySku,
        GetQwOrder,
        GetReturnAndAfsList,
        GetStockSkuList,
        GetStockUpInList,
        GetShipList,
        GetExchangeList,
        getQwOrderSelect
      };
      this.$nextTick(() => {
        const apiDataMap = new Map([
          // 库存列表
          ["GetShipStockListBySku", { skuName: this.SearchForm.skuName }],
          // 订单列表
          [
            "GetQwOrder",
            {
              pageIndex: this.paramsquery.pageIndex,
              type: 0,
              searchOrderId: this.SearchForm.searchOrderId,
            },
          ],
          // 线下订单线上订单
          [
            "getQwOrderSelect",
            {
              pageIndex: this.paramsquery.pageIndex,
              type: 0,
              searchOrderId: this.SearchForm.searchOrderId,
              isOffline: this.SearchForm.isOffline,
            },
          ],
          // 退货库
          [
            "GetReturnAndAfsList",
            {
              pageIndex: this.paramsquery.pageIndex,
              searchOrderId: this.SearchForm.searchOrderId,
            },
          ],
          // Sku
          [
            "GetStockSkuList",
            {
              pageIndex: this.paramsquery.pageIndex,
              skuId: this.SearchForm.skuId,
              skuName: this.SearchForm.skuName,
            },
          ],
          // 库存商品
          [
            "GetStockUpInList",
            {
              pageIndex: this.paramsquery.pageIndex,
              supplier_id: this.SearchForm.supplier_id,
              warehouse_id: this.SearchForm.warehouse_id,
              sku: this.SearchForm.skuId,
              skuName: this.SearchForm.skuName,
            },
          ],
          // 发货表
          [
            "GetShipList",
            {
              pageIndex: this.paramsquery.pageIndex,
              orderStatus: 0,
              orderType: 0,
              shipStyle: 0,
              searchOrderId: this.SearchForm.searchOrderId
            },
          ],
          // 换货表
          [
            "GetExchangeList",
            {
              pageIndex: this.paramsquery.pageIndex,
            },
          ],
        ]);
        const { GetApi } = this.info;
        // console.log(this.info);
        const data = apiDataMap.get(GetApi) || {};
        // console.log(data, "API");
        API[GetApi](data)
          .then((res) => {
            // console.log(res);
            this.tableData = res.orderList || res;
            this.pageTotal = res.pageTotal || 0;
            this.loading = false;
          })
          .catch((error) => {
            console.error("An error occurred:", error);
            this.loading = false;
          });
      });
    },
    // 选择关联
    handleSelectionChange(list) {
      this.multipleSelection = [];
      this.multipleSelection = list[list.length - 1]
        ? [list[list.length - 1]]
        : [];
      // console.log(this.multipleSelection);
    },
    // 页码发生改变时
    handleCurrentChange(index) {
      this.paramsquery.pageIndex = index;
      this.GetDataList();
    },
    // 点击确认选择
    Submit() {
      if (!this.multipleSelection.length)
        return this.$message.warning("至少选择一个数据");
      // console.log(this.info, "this.info");
      // 如果是发货必须调用发货接口
      if (this.info.GetApi == "GetShipStockListBySku") {
        SaveOnlyShip({
          orderId: this.CurrentItem.orderId,
          stockInId: this.multipleSelection[0].id,
        }).then((res) => {
          // console.log(res);
          //库存等于0，也能选择，并进行退货
          if (res.msg !== true && this.info.ShowValue != "退货选择库存") return this.$message.error("库存不足");
          if (res.msg === true || this.info.ShowValue == "退货选择库存") {
            this.$emit("SelectionData", this.multipleSelection[0]);
            this.closeModal();
          } else {
            this.$message.error("发货失败");
          }
        });
      } else if (this.info.ShowValue == "换货选择库存") {
        SaveOnlyExchangeShip({
          orderId: this.CurrentItem.orderId,
          stockInId: this.multipleSelection[0].id,
        }).then((res) => {
          // console.log(res);
          if (res.msg !== true) return this.$message.error("库存不足");
          if (res.msg === true) {
            this.$emit("SelectionData", this.multipleSelection[0]);
            this.closeModal();
          } else {
            this.$message.error("发货失败");
          }
        });
      } else {
        this.$emit("SelectionData", this.multipleSelection[0]);
        this.closeModal();
      }
    },
    // 打开弹窗
    openModal() {
      this.isFormShow = true;
      if (this.info.GetApi == "GetStockUpInList") {
        this.GetOptionsList();
        this.GetWarehouseOptionsList();
      }
      this.SearchForm = {
        OrderNo: "",
        OrderType: 0,
        skuId: "",
        skuName: "",
        searchOrderId: "",
        warehouse_id: 0,
        supplier_id: 0,
        isOffline: 1,
      }
      this.GetDataList();
    },
    // 关闭弹窗
    closeModal() {
      this.isFormShow = false;
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
/deep/.el-dialog{
  margin:0 auto !important;
}
/deep/.el-dialog .el-dialog__body{
  overflow: auto;
  max-height:460px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #DCDEE2;
}
/deep/.el-dialog__footer {
  border-top: 1px solid #DCDEE2;
  padding: 10px 20px;
}
.aform{
   /deep/.el-form-item {
    margin-bottom: 10px !important;
  }
}
/deep/ .el-table__header-wrapper .el-checkbox {
  display: none !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}

::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.el-table__body-wrapper,
.el-scrollbar__wrap {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

.el-timeline-item__node--normal {
  width: 28px;
  height: 28px;
  left: -9px;
  border: 7px solid #fff;
}

.el-table__fixed,
.el-table__fixed-right {
  pointer-events: none;

  td {
    pointer-events: auto;
  }
}

/deep/ .el-table__row--level-1 {
  background-color: #ecf5ff !important;
  /* 设置突出显示的背景色 */
}

.pagination {
  width: 100%;
  height: 50px !important;
  display: flex;
  align-items: center;
}
</style>
